<template>
  <!-- 无图片 -->
  <div class="h-50px flex items-center justify-center bg-gray-3" v-if="!property.imgUrl">
    <Icon icon="ep:picture" class="text-gray-8 text-30px!" />
  </div>
  <div v-else>
    <div
    v-if="property.showTxt"
    class="txtClass"
    :style="
    {
              color: property.txtColor,
              paddingLeft: property.txtPadding+'px',
              paddingRight: property.txtPadding+'px',
              height: property.txtHeight+'px',
              fontSize: property.txtFontSize+'px',
              fontWeight: property.weight?'bold':'400',
            }"
    >{{property.txt}}</div>
    <div class="skillBox">
      <el-image class="min-h-30px" :style="{
        height: property.imgHeight+'px',
        width:'100%'
      }" :src="property.imgUrl" />
      <div class="skillTime" v-if="property.showSpan">
        <div class="hd" :style="{marginTop:property.sTop+'px'}">
          <div class="txtClass" :style="{
                color: property.spanColor,
                paddingLeft: property.spanPadding+'px',
                paddingRight: property.spanPadding+'px',
                height: property.spanHeight+'px',
                fontSize: property.spanFontSize+'px',
                fontWeight: property.spanWeight?'bold':'400',
          }">{{ property.spanTxt }}</div>
          <div class="countdown" 
          :style="{
              color: property.skillTxtColor,
              fontSize: property.skillFontSize+'px',
              fontWeight: property.skillWeight?'bold':'400',}"
          >
            <template v-if="false">
              <span class="time-item">{{ days }}</span>天
              <span class="time-item">{{ months }}</span>月
              <span class="time-item">{{ years }}</span>年
            </template>
            <span class="time-item">{{ hours }}</span>时
            <span class="time-item">{{ minutes }}</span>分
            <span class="time-item">{{ seconds }}</span>秒
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { Position } from '@element-plus/icons-vue/dist/types';
import { ImageBarProperty } from './config'
import { ref, onMounted, onUnmounted } from 'vue'
/** 图片展示 */
defineOptions({ name: 'ImageBar' })

const props = defineProps<{ property: ImageBarProperty }>()

const years = ref('00')
const months = ref('00')
const days = ref('00')
const hours = ref('00')
const minutes = ref('00')
const seconds = ref('00')

let timer

watch(
	()=> props.property.endTime,
  (val) => {
    if (!val) {
      return
    }
    clearInterval(timer)
    updateCountdown()
    timer = window.setInterval(updateCountdown, 1000)
  }
)

const updateCountdown = () => {
  if (!props.property.endTime) return
  var timeString = props.property.endTime; // 时分秒字符串
  var currentDate = new Date(); // 当前日期对象
  var timeArray = timeString.split(':'); // 将时分秒字符串拆分为数组
  currentDate.setHours(Number(timeArray[0]), Number(timeArray[1]), Number(timeArray[2])); // 设置当前日期的时分秒
  var end = currentDate.getTime(); // 获取时间戳
  

  const now = new Date().getTime()
  const diff = end - now

  if (diff <= 0) {
    years.value = '00'
    months.value = '00'
    days.value = '00'
    hours.value = '00'
    minutes.value = '00'
    seconds.value = '00'
    return
  }

  const totalSeconds = Math.floor(diff / 1000)
  const totalMinutes = Math.floor(totalSeconds / 60)
  const totalHours = Math.floor(totalMinutes / 60)
  const totalDays = Math.floor(totalHours / 24)
  const totalMonths = Math.floor(totalDays / 30)
  const totalYears = Math.floor(totalMonths / 12)

  years.value = String(totalYears).padStart(2, '0')
  months.value = String(totalMonths % 12).padStart(2, '0')
  days.value = String(totalDays % 30).padStart(2, '0')
  hours.value = String(totalHours % 24).padStart(2, '0')
  minutes.value = String(totalMinutes % 60).padStart(2, '0')
  seconds.value = String(totalSeconds % 60).padStart(2, '0')
}


onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})

</script>

<style scoped lang="scss">
/* 图片 */
img {
  display: block;
  width: 100%;
  height: 100%;
}
.hd{
  display: flex;
  align-items: center;
  justify-content: center;
}
.skillBox{
  position: relative;
  display: flex;
  justify-content: center;
}
.skillTime{
  position: absolute;
}
</style>
